<template> 
    <div class="goodsinfo-container">
       <transition 
       @before-enter="beforeEnter"
       @enter="enter"
       @after-enter="afterEnter"
       >
        <div class="ball" v-show="ballFlag" ref='ball'></div>
       </transition>
      

       <div class="mui-card">
           <div class="mui-card-content">
               <div class="mui-card-content-inner">
                    <swiper :swipeList='swiperList' :isfull='false'></swiper>
               </div>
           </div>
       </div>

       <div class="mui-card">
           <div class="mui-car-header">商品的名称标题</div>
           <div class="mui-card-content">
               <div class="mui-card-content-inner">
                   <p class="price">
                       市场价：<del>¥2399</del>&nbsp;&nbsp;销售价：<span class="now_price">¥2199</span>
                   </p>
                   <p>购买数量：<numbox @getcount="getSelectedCount" :max='60'></numbox></p>
                   <mt-button type='primary' size='small'>立即购买</mt-button>
                   <mt-button type='danger' size='small' @click='addToShopCar'>加入购物车</mt-button>
               </div>
           </div>
       </div>

       <div class="mui-card">
           <div class="mui-card-header">商品参数</div>
           <div class="mui-card-content">
               <div class="mui-card-content-inner">
                    <p>商品货号：</p>
                    <p>商品货号：</p>
                    <p>商品货号：</p>
               </div>
           </div>
           <div class="mui-card-footer">
                <mt-button type='primary' size="large" plain @click="goDesc(1)">图片内容</mt-button> 
                <mt-button type='danger' size="large" plain @click="goComment(1)">加载评论</mt-button>
           </div>
       </div>
    </div>
</template>

<script>

//1.导入轮播图组件
import swiper from '../subcomponents/swiper.vue';
import numbox from '../subcomponents/goodsinfo_number.vue';

export default {
    data(){
        return {
            id:this.$route.params.id,
            swiperList:[],
            goodsinfo:{},
            ballFlag:false,
            selectedCount:1
        }
    },
    created(){
        this.getSwiperList()
    },
    components:{
        swiper,
        numbox
    },
    methods: {
         getSwiperList(){
             this.swiperList = [
                {url:'../../images/001.jpg',img:'../../images/001.jpg'},
                {url:'../../images/002.png',img:'../../images/002.png'}
                ];
         },
         goDesc(id){
             this.$router.push({name:'goodsdesc', params:{ id }});
         },
         goComment(id){
             this.$router.push({name:'goodscomment', params:{ id }});
         },
         addToShopCar(){
            this.ballFlag = !this.ballFlag;
         },
         getSelectedCount(){
             this.selectedCount = 1
         },
         beforeEnter: (el) => {
             el.style.transform = "translate(0,0)";
         },
         enter(el,done){
             el.offsetWidth;

            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePosition = document.getElementById('badge').getBoundingClientRect();


            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;

             el.style.transform = `translate(${xDist}px,${yDist}px)`;
             el.style.transition="all 2s cubic-bezier(.4,-0.3,1,.68)";
             done();
         },
         afterEnter(el){
            this.ballFlag = !this.ballFlag;
         }
    },

}
</script>

<style lang="scss" scoped>
.goodsinfo-container{
    background-color: #eee;

    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%; 
        background-color: red;
        position: absolute;
        z-index: 99;
        top:390px;
        left: 146px;
    }

    .mui-card{
        margin: 0;
        padding: 10px; 
    }
}

</style>
